<template>
  <div class="pay-container" :class="['style-'+theme]">
    <div class="pay-container-left">
      <div>
        <div class="pay-title mb15" v-if="[1].includes(theme)">
          <span>选择</span>
          <svg-icon :iconClass="pkgIcon" className="pkg-icon"></svg-icon>
          <span>{{packages.name}}套餐</span>
        </div>
        <div>
          <div class="product-item"
            :class="{'checked': selectedProduct.id === item.id}"
            v-for="item in products"
            :key="item.id"
            @click="setProductItem(item)">
            <div class="hot-mark" v-if="![3].includes(theme)&&item.unlimited"><div class="hot-tips">热卖中</div></div>
            <div class="discount-tips" v-if="[3].includes(theme)">{{item.discounts}}</div>
            <div class="product-info">
              <div class="checked-b">
                <i class="el-icon-check"></i>
              </div>
              <div class="price">
              <span>￥</span>
                <span class="fs18">{{item.price|moneyToyuan}}</span>
                /
                <span>{{ item.name }}</span>
              </div>
              <div v-if="![3].includes(theme)">
                <span class="origin-price">￥{{ item.origin_price|moneyToyuan }}</span>
                <span class="monthly-price">{{item.monthly}}</span>
              </div>
              <span class="origin-price" v-else>原价￥{{ item.origin_price|moneyToyuan }}/{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-if="hasAddProduct&&tag!==3">
        <div class="ad-title" v-if="theme===3">
          <span>限时抢购</span>
          <div class="ad-tips">会员买{{addPackagesOpts.length}}送1</div>
        </div>
        <div class="pay-title mt30" v-else-if="addPackagesOpts.length > 1">
          <span>限时优惠加购</span>
          <span class="act-tag">限时优惠，买{{addPackagesOpts.length}}送1</span>
        </div>
        <div class="pay-title mt30" v-else>
          <span>限时优惠</span>
          <span class="act-tag">买1送1</span>
        </div>
        <div class="mt15">
          <el-checkbox class="add-checkbox" v-for="(it, i) in addPackagesOpts" :key="i" v-model="it.checked" @change="checkedAddPackages(it)">
            <svg-icon :iconClass="pkgIconObj[it.packages.pkg_id]" className="pkg-icon" v-if="theme!==3"/>
            <span class="pkg-title">
              {{it.packages.name}}
            </span>
            <span class="pkg-info">
              <template v-if="it.sltProduct.id">
                {{it.sltProduct.name}}/<span v-if="it.is_free" class="color-warn">￥0</span><span v-else>￥{{it.sltProduct.price|moneyToyuan}}</span>
              </template>
            </span>
          </el-checkbox>

          <el-checkbox class="add-checkbox" v-for="(it, i) in unlimitedPackages" :key="'u'+i" disabled :value="true">
            <svg-icon :iconClass="pkgIconObj[it.packages.pkg_id]" className="pkg-icon" v-if="theme!==3"/>
            <span class="pkg-title">
              您已经是{{it.packages.name.replace(/(权益包)|VIP/,'')}}终身会员
            </span>
            <span class="pkg-info">
            </span>
          </el-checkbox>

        </div>
      </div>
      <AddActList
        class="pay-act-list"
        :list="addActInfo"
        v-model="addActValue"/>
    </div>
    <div class="pay-container-right" v-if="tag!==3" :class="{'pay-flex':[3].includes(theme)&&!hasAddProduct}">
      <div>
        <div class="coupon-box">
          <span class="receive-coupon" v-if="isShowCoupon" @click="toCouponPage">去领券</span>
          <el-select size="small"
            class="coupon-select"
            v-model="coupon_id"
            :popper-class="'coupon-popper coupon-popper'+theme"
            placeholder="暂无可用优惠券"
            no-data-text="暂无可用优惠券"
            @change="onCouponChange">
            <el-option v-for="item in usageCouponList"
              :key="item.c_id"
              :value="item.c_id"
              :label="couponLabel(item)"></el-option>
          </el-select>
        </div>
        <div class="pay-code-box">
          <p v-if="![3].includes(theme)">请使用<template>微信或</template>支付宝扫码支付</p>
          <div class="pay-info-box">
            <div class="pay-info-1">
              <PaymentCode
              :openPos="openPos"
              :isAgree.sync="isAgree"
              :width="codeSize.width"
              :height="codeSize.height"
              :padding="codeSize.padding"
              :pkgId="pkgId"
              :product="selectedProduct"
              :productPrice="productPrice"
              :otherParamsStr="otherParamsStr"
              @refresh="onCodeRefresh"
              @paySuccess="$emit('paySuccess')">
              <div class="pay-info-2">
              <div class="mt15">
                <span class="c-white block" v-if="[3].includes(theme)">优惠价</span>
                <span class="c-white" v-else>总金额：</span>
                <span class="c-red">￥</span>
                <span class="c-red fs30">{{productPrice|moneyToyuan}}</span>
              </div>
              <div style="margin-top: 7px">
                <span class="color-warn">{{productCountEq}}</span>
                <span class="pay-origin-price">原价￥{{productOriginPrice|moneyToyuan}}</span>
              </div>
            </div>
            </PaymentCode>
              <div v-if="[3].includes(theme)" class="mt10">微信/支付宝扫码</div>
            </div>

          </div>
        </div>
      </div>
      <ProtocolView v-model="isAgree" :selectedProduct="selectedProduct" class="mt20"></ProtocolView>
    </div>
    <div v-else class="pay-container-unlimited">
      您已经是终身会员
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import PaymentCode from '@/components/payment-code/src/main'
import ProtocolView from './protocol-view.vue'
import AddActList from './add-act.vue'
import { isPassVersion } from '@/utils/judge'
import { getSomeProducts, getProductsActivity } from '@/api/rights'
import { getUsageCouponList } from '@/api/coupon'
export default {
  name: 'Pay',
  components: {
    PaymentCode,
    ProtocolView,
    AddActList
  },
  props: {
    pkgId: {
      require: true
    },
    tag: Number,
    pkgIds: {
      type: Array,
      require: true
    },
    buyFreeActId: null,
    theme: {
      type: Number,
      default: 1
    },
    openPos: String
  },
  data () {
    return {
      isAgree: false,
      pkgIconObj: {
        '10000': 'desktop',
        '20000': 'todo',
        '40000': 'soso',
        '70000': 'xzpaper'
      },
      hasBuyFreeAct: false,
      hasBuyfor0yuan: false,
      hasAddProduct: false,
      addPackagesOpts: [],
      unlimitedPackages: [],
      pkgIcon: '',
      isShowCoupon: false,
      selectedProduct: {},
      // 权益包
      packages: {},
      couponList: [],
      // 会员套餐
      products: [],
      selectCoupon: {},
      coupon_id: null,
      orderInfo: {},
      addActValue: []
    }
  },
  computed: {
    ...mapGetters(['appInfo', 'appCfg', 'userInfo', 'hasLogin']), // 非多买多送活动下支付页面未获取userInfo
    codeSize () {
      if ([3].includes(this.theme)) {
        return {
          width: 120,
          height: 120,
          padding: 5
        }
      }
      return {
        width: 150,
        height: 150,
        padding: 7
      }
    },
    isXzMerchant () {
      return this.appInfo.merchant === 'xz'
    },
    // eslint-disable-next-line sonarjs/cognitive-complexity
    otherParamsStr () {
      const params = {
        couponid: this.coupon_id
      }
      const act_ids = [...this.addActValue]
      if (this.hasBuyFreeAct) {
        if (this.addPackagesOpts.length) {
          this.addPackagesOpts.forEach(it => {
            if ([!it.checked, !it.sltProduct.id].includes(true)) return
            if (it.is_free) {
              params['giveproduct'] = params['giveproduct'] || []
              params['giveproduct'].push(it.sltProduct.id)
            } else {
              params['addproduct'] = params['addproduct'] || []
              params['addproduct'].push(it.sltProduct.id)
            }
            params['actid'] = this.buyFreeActId
          })
        } else {
          params['noproduct'] = true
          params['giveproduct'] = [this.selectedProduct.id]
          params['actid'] = this.buyFreeActId
        }
      }
      // if (this.productActInfo.id) {
      //   act_ids.push(this.productActInfo.id)
      // }
      params['actids'] = act_ids.join(',')
      return JSON.stringify(params)
    },
    usageCouponList () {
      return this.couponList.filter(item => item.threshold <= this.selectedProduct.price)
    },
    discount () {
      if (!this.selectedProduct.id) return 0
      return this.selectCoupon.amount || 0
    },
    addActInfo () {
      return this.selectedProduct['markup-price'] || []
    },
    productPrice () {
      if (this.hasBuyfor0yuan) return 1
      let price = this.addPackagesOpts.reduce((total, it) => {
        if ([it.is_free, !it.checked, !it.sltProduct.id].includes(true)) return total
        return total + it.sltProduct.price
      }, this.selectedProduct.price)
      price = Math.max(1, price - this.discount)
      if (this.addActValue.length) {
        for (const item of this.addActInfo) {
          if (this.addActValue.includes(item.id))price += item.setting.price
        }
      }
      return price
    },
    productCountEq () {
      const moneyToyuan = this.$options.filters.moneyToyuan
      let equation = this.addPackagesOpts.filter(it => ![!it.checked, !it.sltProduct.id].includes(true))
        .sort((a, b) => Number(a.is_free) - Number(b.is_free))
        .map(it => it.is_free ? '+0' : `+${moneyToyuan(it.sltProduct.price)}`)
        .join('')
      if (equation) {
        equation = `（${moneyToyuan(this.selectedProduct.price)}${equation}`
        if (this.selectCoupon.amount) {
          equation += `-${moneyToyuan(this.selectCoupon.amount)}`
        }
        equation += `=${moneyToyuan(this.productPrice)}）`
      }
      return equation
    },
    productOriginPrice () {
      const price = this.selectedProduct.origin_price
      return this.addPackagesOpts.reduce((total, it) => {
        if ([!it.checked, !it.sltProduct.id].includes(true)) return total
        return total + it.sltProduct.origin_price
      }, price)
    }
  },
  watch: {
    hasLogin () {
      this.getCouponList()
    },
    usageCouponList (val) {
      this.selectCoupon = val[0] || {}
      this.coupon_id = this.selectCoupon.c_id || null
    },
    hasBuyfor0yuan (val) {
      if (val) {
        this.products = this.products.filter(it => {
          it.price = 1
          return it.unlimited
        })
      }
    },
    'products.length' (val) {
      this.setProductItem(this.products.find(item => item.unlimited) || this.products[0])
    },
    'selectedProduct.id' (val) {
      this.changeAddProduct()
    },
    'userInfo.user_id' (val) {
      this.transAddPackages()
    }
  },
  filters: {
    moneyToyuan (val = 0) {
      return parseFloat((val / 100).toFixed(2))
    },
    valToFixed2 (val = 0) {
      return (val / 100).toFixed(2)
    }
  },
  created () {
    this.isAgree = !this.appInfo.needProtocol
    this.pkgIcon = this.pkgIconObj[this.pkgId]
    this.isShowCoupon = isPassVersion('3.2.0') || this.theme === 3
    this.packagesList = []
    this.getCouponList()
    this.init()
    this.$xzAsy('xz_get_day_from_installation').then(res => {
      this.payDay = res
    })
    this.$xzAsy('xz_get_paper_data').then(res => {
      if (res.paperID) {
        this.paperInfo = res
      }
    })
    // 场景优惠券，当选择一张券之后，自动刷新并选择刚才的券
    this.$eventBus.$on('scene-coupon-select', this.reloadCouponListAndSelectItem)
  },
  activated () {
    this.getCouponList()
  },
  beforeDestroy () {
    this.$eventBus.$off('scene-coupon-select', this.reloadCouponListAndSelectItem)
  },
  methods: {
    async init () {
      await this.getPackages()
      this.hasBuyFreeAct = this.buyFreeActId && this.packagesList.length > 1
      this.transAddPackages()
    },
    getPackages () {
      const params = {
        pkg_id: this.pkgIds || [ this.pkgId ]
      }
      return getSomeProducts(params).then(res => {
        const { package_list, list } = res.data || {}
        const packagesList = []
        package_list.forEach(packageItem => {
          let name = packageItem.name.split('权益包')[0]
          if (!name.includes('VIP')) name = name + 'VIP'
          packageItem.name = name

          const obj = {
            packages: packageItem,
            products: list.filter(it => it.relPackage.some(id => id === packageItem.id))
          }
          if (packageItem.pkg_id === this.pkgId) {
            this.transMainPackage(obj)
          } else {
            obj.products = obj.products.sort((a, b) => b.bus_ext.duration - a.bus_ext.duration) // 先排序，便于后面计算加购套餐条件：主套餐时段内最高
            packagesList.push(obj)
          }
        })
        this.packagesList = this.filtersRights(packagesList)
      })
    },

    filtersRights (list = []) {
      return list.filter(item => {
        const packageItem = item.packages
        packageItem.name = packageItem.name.replace('\n', '')
        return isPassVersion(packageItem.min_ver)
      })
    },
    couponLabel (item) {
      return `￥${this.$options.filters.moneyToyuan(item.amount)}-${item.name}（满￥${this.$options.filters.moneyToyuan(item.threshold)}可用）`
    },
    async getCouponList () {
      // if (!this.isXzMerchant) return false
      if (this.hasLogin) {
        const res = await getUsageCouponList({ p_id: this.pkgId })
        this.couponList = res.data.list || []
      } else if (this.couponList.length) {
        this.couponList = []
      }
    },
    async reloadCouponListAndSelectItem (val) { // 重新加载优惠券列表并指定一个item
      await this.getCouponList()
      this.selectCoupon = this.usageCouponList.find(item => item.coupon_id === val) || {}
      this.coupon_id = this.selectCoupon.c_id || null
    },
    transAddPackages () {
      if (!this.hasBuyFreeAct) return
      const buyList = this.userInfo.buy_right_package || []
      const list = []
      const list2 = []
      this.packagesList.forEach((it) => {
        const unlimited = buyList.some(buyIt => buyIt.pkg_id === it.packages.pkg_id && buyIt.unlimited)
        if (unlimited) {
          list2.push({ ...it })
        } else {
          list.push({
            ...it,
            checked: false,
            is_free: false,
            sltProduct: {}
          })
        }
      })
      this.addPackagesOpts = list
      this.unlimitedPackages = list2

      this.hasBuyfor0yuan = !this.addPackagesOpts.length && list2.length === this.packagesList.length

      this.changeAddProduct()
    },
    changeAddProduct () {
      if (!this.addPackagesOpts.length) return
      const isOnly = this.addPackagesOpts.length === 1
      this.hasAddProduct = this.addPackagesOpts.filter(it => {
        it.sltProduct = (
          this.selectedProduct.id && it.products.find(productItem =>
            productItem.bus_ext.duration <= this.selectedProduct.bus_ext.duration
          )
        ) || {}
        it.is_free = it.sltProduct.id && isOnly
        it.checked = it.is_free
        return !it.sltProduct.id
      }).length === 0 && this.addPackagesOpts.length
    },
    checkedAddPackages (packageItem) {
      if (packageItem.is_free) return
      if (packageItem.checked) {
        const unchecks = this.addPackagesOpts.filter(it => !it.checked)
        if (unchecks.length === 1) {
          unchecks[0].is_free = true
          unchecks[0].checked = true
        }
      } else {
        this.addPackagesOpts.filter(it => {
          if (it.is_free) {
            it.checked = false
            it.is_free = false
          }
        })
      }
    },
    transMainPackage ({ packages, products }) {
      let data = products
      if (!this.isXzMerchant) {
        data = data.filter(item => !item.cycle_pay_flag)
      }
      const list = data.map(item => {
        let str = ''
        if (item.unlimited) {
          str = '永久使用'
          item.discounts = '最受欢迎'
        } else {
          const days = Math.round(item.bus_ext.duration / (24 * 60)) || 1
          if (days < 31) {
            const dayly = item.price / 100 / days
            str = `低至￥${parseFloat(dayly.toFixed(2))}/天`
          } else {
            const month = Math.round(days / 30.5)
            const monthly = item.price / 100 / month
            str = `低至￥${parseFloat(monthly.toFixed(2))}/月`
          }
          item.discounts = '限时' + parseFloat((item.price / item.origin_price * 10).toFixed(1)) + '折'
        }
        item.discount = item.origin_price - item.price
        item.monthly = str
        return item
      })
      this.getActivity(list)
      // this.setProductItem(list.find(item => item.unlimited) || {})
      this.packages = { id: packages.id, name: packages.name }
    },
    getActivity (productList) {
      const params = { 'product_id': productList.map(it => it.id) }
      getProductsActivity(params).then(res => {
        const list = res?.data?.list || []
        list.forEach(it => {
          const productIds = it.product_ids || []
          if (it.setting) {
            it.setting = JSON.parse(it.setting)
          }
          productIds.forEach(id => {
            const item = productList.find(product => product.id === id) || {}
            if (item[it.act_fixed_id]) {
              item[it.act_fixed_id].push(it)
            } else {
              item[it.act_fixed_id] = [it]
            }
          })
        })
        this.products = productList
      })
    },
    setProductItem (item) {
      this.selectedProduct = item
      this.addActValue = []
    },
    onCodeRefresh () {
      this.getCouponList()
    },
    toCouponPage () {
      this.$emit('toCouponPage')
    },
    onCouponChange (val) {
      this.selectCoupon = this.usageCouponList.find(item => item.c_id === val) || {}
    }
  }
}
</script>
<style scoped lang="scss">
.c-red{
  color: #FC5B42;
}
.c-white{
  color: #fff;
}
.fs30{
  font-size: 30px;
}
.pay-container{
  display: flex;
  justify-content: space-between;
}
.pay-container-left{
  flex: 1;
  margin-right: 34px;
}
.pay-title{
  display: flex;
  align-items: center;
  color: #fff;
  font-weight: bold;
  &::before{
    content: ' ';
    display: inline-block;
    margin-right: 7px;
    height: 16px;
    width: 6px;
    background: #FFCE5A;
    border-radius: 6px;
  }
  .pkg-icon{
    margin: 0 4px;
    font-size: 18px;
  }
}
.product-item{
  position: relative;
  border-radius: 6px;
  opacity: 1;
  border: 1px solid #474747;
  color: #D6B383;
  cursor: pointer;
  +.product-item{
    margin-top: 10px;
  }
  &:hover{
    border-color: #D6B383;
  }
  &.checked{
    color: #7B4801;
    background: linear-gradient(180deg, #FAE3C6 0%, #F8D4A2 100%);
    border-color: transparent;
    .monthly-price{
      background: #FFE7C6;
    }
    .origin-price{
      color: #333;
    }
  }
  .checked-b{
    display: none;
  }
  .product-info{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 10px;
    height: 60px;

    }
  .price{
    font-weight: bold;
  }
  .hot-mark{
    position: absolute;
    right: -3px;
    top: -3px;
    width: 54px;
    height: 54px;
    z-index: 9;
    background: url('../../assets/hot.png');
    .hot-tips{
      position: relative;
      bottom: -10px;
      left: 10px;
      font-size: 12px;
      font-weight: bold;
      color: #fff;
      text-align: center;
      transform: rotate(45deg);
    }
  }

  .limited-time{
    position: absolute;
    right: -1px;
    top: -5px;
    padding: 0 10px;
    height: 18px;
    line-height: 18px;
    background: #FF4545;
    border-radius: 4px 4px 0px 4px;
    font-size: 12px;
    font-weight: 400;
    color: #FFFFFF;
  }
  .origin-price{
    opacity: 0.3;
    font-size: 12px;
    text-align: center;
    text-decoration: line-through;
  }
  .monthly-price{
    display: inline-block;
    width: 90px;
    padding: 4px;
    margin-left: 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 4px;
    font-size: 12px;
    line-height: 14px;
    text-align: center;
  }
}
.pay-container-right{
  position: relative;
  // margin-left: 47px;
  // flex: 1;
}
.agreement {
  position: absolute;
  right: 0;
  font-size: 12px;
  font-weight: 400;
  color: #fff;
  opacity: 0.8;
  cursor: pointer;
  &:hover {
    opacity: 1;
  }
}
.coupon-box{
  position: relative;
}
.coupon-select{
  width: 100%;
}
.coupon-num,.receive-coupon{
  position: absolute;
  right: 30px;
  top: 1px;
  font-size: 12px;
  z-index: 99;
  line-height: 30px;
}
.receive-coupon{
  color: #D6B383;
  cursor: pointer;
  &:hover{
    text-decoration: underline;
  }
}
.pay-code-box{
  width: 320px;
  height: 356px;
  padding: 20px;
  background: rgba(255,255,255,0.03);
  border-radius: 10px;
  text-align: center;
  margin-top: 10px;
}
.pay-info-1{
  /deep/.pay-code{
    margin: 20px auto 0;
  }
  /deep/.pay-type{
    display: none;
  }
  /deep/.refund{
    margin-top: 20px;
  }
}

.pay-origin-price{
  text-decoration: line-through;
  color: rgba(255,255,255,0.5);
}

.add-checkbox{
  display: flex;
  align-items: center;
  padding: 5px 15px 5px 18px;
  min-height: 40px;
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  margin: 0;
  + .add-checkbox{
    margin-top: 12px;
  }
  &:hover{
    /deep/.el-checkbox__inner{
      border-color: #2FC670!important;
      background-color: #2FC670!important;
    }
  }
  &.is-checked{
    background: linear-gradient(180deg, #FAE3C6 0%, #F8D4A2 100%);
    /deep/.el-checkbox__inner{
      border-color: #2FC670!important;
      background-color: #2FC670!important;
      &::after{
        border-color: #fff;
      }
    }
    /deep/.el-checkbox__label{
      color: #7B4801;
    }
  }
  &.is-disabled{
    opacity: .6;
    /deep/.el-checkbox__inner{
      opacity: .3;
    }
  }
  /deep/.el-checkbox__inner{
    display: block;
    border-radius: 2px;
    border-color: #898989;
    background-color: #5A5A5A;
  }
  /deep/.el-checkbox__label{
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 12px;
    color: #fff;
    font-size: 14px;
  }
  .pkg-icon{
    font-size: 18px;
    margin-right: 4px;
  }
  .pkg-title{
    flex: 1;
    white-space: normal;
  }
  .pkg-info{
    padding-left: 4px;
  }
}
.act-tag{
  padding: 0 12px;
  height: 24px;
  line-height: 22px;
  font-weight: bold;
  color: #FC5B42;
  text-align: center;
  background: rgba(198,47,74,0.2);
  border-radius: 79px;
  border: 1px solid rgba(254,101,101,0.5);
  margin-left: 10px;
}
.discount-tips{
  position: absolute;
  width: 60px;
    height: 18px;
    line-height: 18px;
    background: #FF4545;
    font-size: 12px;
    color: #fff;
    text-align: center;
    top: -5px;
    right: 0;
    border-radius: 5px;
}
.pay-container-unlimited{
  flex: 1;
  height: 220px;
  line-height: 220px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}
.pay-flex{
  .pay-code-box{
    height: 158px!important;
  }
  .pay-info-box{
    display: flex;
    align-items: center;
  }
  .pay-code{
    margin: 15px 15px 10px;
  }
  .block{
    display: block;
  }
}
.pay-container.style-3{
  .product-item{
    border: none;
    background: rgba(0,0,0,0.3);
    color: #fff;
    &.checked{
      background: linear-gradient(180deg, #FFF2D2 0%, #F8DD99 100%);
      color: #985C00;
      .origin-price{
        color: #BA7309;
      }
      .checked-b{
        display: block;
      }
    }
    + .product-item{
      margin-top: 10px;
    }
    .origin-price{
      opacity: 0.7;
    }
    .product-info{
      width: 240px;
      height: 54px;
      padding: 10px 17px;
      overflow: hidden;
      border-radius:6px;
    }
  }
  .checked-b{
    position: absolute;
    right: -18px;
    bottom: -18px;
    width: 36px;
    height: 36px;
    background: #2FC670;
    transform: rotateZ(45deg);
    .el-icon-check{
      position: absolute;
      left: 1px;
      bottom: 10px;
      transform: rotateZ(-45deg);
      color: #fff;
    }
  }
  .pay-container-right{
    margin-left: 10px;
    padding: 15px;
    background: rgba(0,0,0,0.3);
    border-radius: 10px;
  }
  .pay-code-box{
    width: 260px;
    height: 237px;
    padding: 0;
    margin: 0;
    background:transparent;
  }
  .pay-info-2{
    flex: 1;
    text-align: center;
    .c-red{
      color: #fff;
    }
  }
  .ad-title{
    position: relative;
    margin-top: 13px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
  }
  .ad-tips{
    position: absolute;
    left: 72px;
    top: 0;
    padding: 4px 13px;
    background: linear-gradient(180deg, #FFF8E6 0%, #FFDE91 100%);
    border-radius: 23px;
    color: #B9740C;
    font-size: 14px;
    &::after {
      content: ' ';
      position: absolute;
      bottom: -10px;
      left: 45%;
      border-width: 5px;
      border-color: transparent;
      border-top-color: #FFDE91;
      border-style: solid;
  }
  }
  .add-checkbox{
    background: rgba(0,0,0,0.3);
    + .add-checkbox{
      margin-top: 6px;
    }
  }
  /deep/.el-checkbox__inner{
    border-color: #D4CECE;
    background-color: #FFF;
  }
  .add-checkbox{
    padding: 5px 12px;
    &.is-checked{
      /deep/.el-checkbox__label{
        color: #fff;
      }
    }
  }
  .pkg-title{
    font-weight: bold;
  }
  .color-warn{
    color: #FFD646;
  }
  .receive-coupon{
    color: #F8DD99;
  }
}
.pay-act-list{
  /deep/.act-title{
    margin-top: 20px;
    font-size: 14px;
    &::before{
      height: 16px;
      vertical-align:-0.15em
    }
  }
  /deep/.act-checkbox-group{
    margin-top: 15px;
    grid-template-columns: 1fr;
  }
  /deep/.act-checkbox{
    min-height: 46px;
    .act-label,.act_price{
      font-size: 14px;
    }
  }
}
</style>
<style lang="scss">
.style-3{
  .el-input{
    .el-input__inner{
      background-color: transparent;
      border-color: rgba(255,255,255,0.3);
    }
    &:hover,&:focus,&.is-focus{
      .el-input__inner{
        border-color: rgba(255,255,255,0.4)!important;
      }
    }
  }

}
.coupon-popper3{
  background-color: #fff;
  border: none;
  .el-select-dropdown__empty{
    color: #666;
  }
  .el-select-dropdown__item{
    color: #666;
    &:hover{
      background-color: rgba(0, 0, 0, 0.1);
    }
    &.selected{
      color: #00BBD7;
    }
  }
}
</style>
